<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <script>
            $(document).ready(function() {
                $(function() {
                    $("#rightMenu > li > a").click(function() {
                        $(this).find("+ ul").slideToggle("fast");
                    });
                    var rankProgress = $("#rankBar").width() / $("#rankBarContainer").width() * 100;
                    var health = $("#healthBar").width() / $("#rankBarContainer").width() * 100;
                    var armor = $("#armorBar").width() / $("#rankBarContainer").width() * 100;
                    $("#rankBarContainer").attr("title", rankProgress.toFixed(1) + "%");
                    $("#healthBarContainer").attr("title", health.toFixed(1) + "%");
                    $("#armorBarContainer").attr("title", armor.toFixed(1) + "%");
                });
            });
        </script>
        <ul id="rightMenu">
            <li id="profile">
                <a>Profile</a>
                <ul>
                    <li>
                        <a>
                            <img id="profilePicture" alt="Profile Picture" src="resources/images/user.png" height="150" width="150">
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a>General Info</a>
                <ul>
                    <li>
                        <a>
                            <table id="generalInfo">
                                <tr>
                                    <td class="label" style="padding-right: 5px">Progress</td>
                                    <td>
                                        <div id="rankBarContainer" title="">
                                            <div id="rankBar"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label" style="padding-right: 5px">Health</td>
                                    <td>
                                        <div id="healthBarContainer" title="">
                                            <div id="healthBar"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label" style="padding-right: 5px">Armor</td>
                                    <td>
                                        <div id="armorBarContainer" title="">
                                            <div id="armorBar"></div>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label" style="padding-right: 5px">Rank</td>
                                    <td>Godfather</td>
                                </tr>
                                <tr>
                                    <td class="label" style="padding-right: 5px">Money</td>
                                    <td>100,000,000</td>
                                </tr>
                                <tr>
                                    <td class="label" style="padding-right: 5px">Bullets</td>
                                    <td>10,000</td>
                                </tr>
                                <tr>
                                    <td class="label" style="padding-right: 5px">Weapon</td>
                                    <td>Tommy Gun</td>
                                </tr>
                                <tr>
                                    <td class="label" style="padding-right: 5px">Protection</td>
                                    <td>Kevlar</td>
                                </tr>
                                <tr>
                                    <td class="label" style="padding-right: 5px">Location</td>
                                    <td>Mosjøen</td>
                                </tr>
                            </table>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <a>Forums</a>
                <ul id="forum">
                    <li><a onclick="$('#content').load('pages/forums/generalForum.html')">General</a></li>
                    <li><a onclick="$('#content').load('pages/forums/tradingForum.html')">Trading</a></li>
                    <li><a onclick="$('#content').load('pages/forums/offTopicForum.html')">Off Topic</a></li>
                    <li><a onclick="$('#content').load('pages/forums/crewForum.html')">Crew</a></li>
                </ul>
            </li>
            <li>
                <a>User</a>
                <ul id="user">
                    <li><a onclick="$('#content').load('pages/user/profile.html')">Profile</a></li>
                    <li><a onclick="$('#content').load('pages/user/messages.html')">Messages</a></li>
                    <li><a onclick="$('#content').load('pages/user/settings.html')">Settings</a></li>
                    <li><a onclick="$('#content').load('pages/user/logout.html')">Logout</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>
